<template>
  <div>
    <a-button type="primary" @click="openModal">打开弹窗</a-button>
    <contentModel v-if="showModal" title="标题吖" @close="closeModal">
      <template #header-left>
        header-left
        <a-button type="primary" size="mini" @click="closeModal"
          >我这里也返回吖</a-button
        >
      </template>
      <template #header-right>header-right</template>
      <div>这里是内容</div>
      <template #footer> 底部 </template>
    </contentModel>
  </div>
</template>

<script setup lang="ts">
  import useModal from '@/common/hooks/modal';
  import { defineAsyncComponent } from 'vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );

  const { showModal, closeModal, openModal } = useModal();
</script>
